<style scoped="">
	.title_card{
    float: left;
    height: 300px;
  }
 /* .title_card:hover{
    transform: translateY(-1%);
    -webkit-box-shadow: 0px 4px 10px 2px #CCC;
    -webkit-transition: all .4s;
  } */
  .card_title{
    padding: 10px;
    font-size: 16px;
  }
  .list_title{
    font-size: 14px;
    height: 32px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-bottom: 1px solid #d2d2d2;
  }
  .col_info2{
      text-align: left;
      padding-right: 20px;
      padding-bottom: 4px;
      padding-top: 4px;
  }
  .ivu-poptip-rel{
    width: 100%;
  }
</style>
<template>
	<div>
		<pheader style="border-bottom: 1px solid #dcdae2; ">
			<div slot="left">
				<Button @click="closeHandlePage()" style="color: #2d8cf0;">
					<Icon type="md-arrow-round-back" style="font-size: 15px;padding-right:8px;line-height: 8px;" />返回
				</Button>
				<span style="padding-left: 12px;">{{"服务订购详情/"+params.tenantName + "/" + params.tenantInfo.project.project}}</span>
			</div>
		</pheader>
		<tabContent>
			<template slot="content">
				<!-- 第一行 -->
				<div style="margin-top: 10px;">
					<div class="title_card" style="width: calc(30% - 10px);">
						<div class="list_title">
							<div style="float:left;width: 14px;line-height: 10px;">
								<img src="../../../static/image/circle.png" style="width: 100%;">
							</div>
							<div style="float:left;padding-left:8px">
								<span>租户介绍</span>
							</div>
						</div>
						<div style="padding: 8px;line-height: 24px;height: calc(100% - 32px);overflow-y: auto;">
							<p><span style="font-weight: bold;">租户名称：</span>{{params.tenantInfo.project.tenant_name}}</p>
							<p><span style="font-weight: bold;">项目名称：</span>{{params.tenantInfo.project.project}}</p>
							<p><span style="font-weight: bold;">入驻时间：</span>{{params.tenantInfo.keyStageTime.reqDoneTime}}</p>
							<p><span style="font-weight: bold;">租户类型：</span>{{params.tenantInfo.project.projectType}}</p>
							<p><span style="font-weight: bold;">运营人员：</span>{{params.tenantInfo.businessManName}}</p>
							<p><span style="font-weight: bold;">租户接口人：</span>{{params.tenantInfo.projectManager}}</p>
							<!-- <p><span style="font-weight: bold;">是否签订合同：</span>{{params.tenantInfo.project.isContract == null ? "未知":params.tenantInfo.project.isContract}}</p> -->
							<p><span style="font-weight: bold;">项目描述：</span><span>{{params.tenantInfo.project.des}}</span></p>


						</div>

					</div>

					<!-- 图表 -->
					<div class="title_card" style="margin-left: 20px;width: calc(70% - 10px);">
						<div class="list_title">
							<div style="float:left;width: 14px;line-height: 10px;">
								<img src="../../../static/image/circle.png" style="width: 100%;">
							</div>
							<div style="float:left;padding-left:8px">
								<span>服务订购统计</span>
							</div>
						</div>
						<div style="height:100%;width:100%;">
							<div id="resoureces1" style="border: 1px solid #d2d2d2;height:calc(100% - 52px);width:calc(30% - 13px);margin:10px; padding:0px;float:left;">
							</div>
							<div id="resoureces" style="border: 1px solid #d2d2d2;height:calc(100% - 52px);width:calc(40% - 13px);float:left;margin:10px 0px; padding:0px;">
							</div>
							<div id="resoureces2" style="border: 1px solid #d2d2d2;height:calc(100% - 52px);width:calc(30% - 15px);float:left;margin:10px; padding:0px;">
							</div>
						</div>
					</div>
				</div>
				<!-- 资源订购列表 -->
				<div style="margin-top: 20px;float: left;width: 100%;">
					<div class="list_title">
						<div style="float:left;width: 14px;line-height: 10px;">
							<img src="../../../static/image/circle.png" style="width: 100%;">
						</div>
						<div style="float:left;padding-left:8px">
							<span>资源订购列表</span>
						</div>
					</div>
					<div style="padding-top: 10px;">
						<Table :columns="resourceColumn" :data="resourceList" border :span-method="handleSpan2">
							<template slot-scope="{ row, index }" slot="index">
								<span>{{index + 1}}</span>
							</template>
							<template slot-scope="{ row, index }" slot="clazz">
								<span>{{row.clazz.split(".").length > 1 ? row.clazz.split(".")[1]:row.clazz}}</span>
							</template>
							<template slot-scope="{ row, index }" slot="serviceName">
								<span>{{row.serviceName.split(".").length > 1 ? row.serviceName.split(".")[1]:row.serviceName}}</span>
								<Tooltip v-if="row.subName == null || row.subName == ''" :content="row.des === undefined || row.des === null || row.des === '' ? '暂无信息':row.des"
								 max-width="200" placement="right" :transfer="true" style="white-space: normal;">
									<Icon type="md-help-circle" />
								</Tooltip>
							</template>
							<template slot-scope="{ row, index }" slot="subName">
								<span>{{row.subName.split(".").length > 1 ? row.subName.split(".")[1]:row.subName}}</span>
								<Tooltip v-if="row.subName != null && row.subName != ''" :content="row.des === undefined || row.des === null || row.des === '' ? '暂无信息':row.des"
								 max-width="200" placement="right" :transfer="true" style="white-space: normal;">
									<Icon type="md-help-circle" />
								</Tooltip>
							</template>
							<template slot-scope="{ row, index }" slot="options">
								<!-- 默认 -->
								<Row v-if="row.resourcetype == 0">
									<Col span="12" class="col_info2">
									<span>数量：{{row.val}}</span>
									</Col>
									<Col span="12" class="col_info2">
									<span>*单位：{{row.unit}}</span>
									</Col>
								</Row>
								<!-- 单选 -->
								<Row v-else-if="row.resourcetype == 1">
									<Col span="24" class="col_info2" style="text-align: center;">
									<span>{{row.val}}</span>
									</Col>
								</Row>
								<!-- 文本框 -->
								<Row v-else-if="row.resourcetype == 3">
									<template v-for="(item, key) in row.options">
										<Col span="24" :key="key">
										<span>{{item}}：</span>
										<span>{{row.val}}</span>
										</Col>
									</template>
								</Row>
								<!-- 多选 -->
								<Row v-else-if="row.resourcetype == 4">
									<Col span="24" style="text-align: center;">
									<CheckboxGroup v-model="row.val">
										<Checkbox v-for="(item,index) in row.options" :key="index" :label="item" :disabled="true">{{item}}</Checkbox>
									</CheckboxGroup>
									</Col>
								</Row>
								<!-- 双副本 -->
								<Row v-if="row.resourcetype == 5">
									<Col span="12" class="col_info2">
									<span>双副本数量：</span>
									<span>{{row.val}}</span>
									</Col>
									<Col span="11" class="col_info2">
									<span>*单位：{{row.unit}}</span>
									</Col>
									<Col span="12" class="col_info2">
									<span>单副本数量：{{row.val/2}}</span>
									</Col>
								</Row>
								<!-- 三副本 -->
								<Row v-if="row.resourcetype == 6">
									<Col span="12" class="col_info2">
									<span>*三副本数量：{{row.val}}</span>
									</Col>
									<Col span="11" class="col_info2">
									<span>*单位：{{row.unit}}</span>
									</Col>
									<Col span="12" class="col_info2">
									<span>单副本数量：{{parseFloat(row.val/3).toFixed(2)}}</span>
									</Col>
								</Row>
							</template>

							<template slot-scope="{ row, index }" slot="applyTime">
								<span v-if="row.reqId > 0" >{{formaTime(row.reqId)}}</span>
								<span v-else>————</span>
								<!-- <span>{{params.tenantInfo.project.create_time}}</span> -->
							</template>
							<template slot-scope="{ row, index }" slot="action">
								<Button v-if="row.reqId != 0" @click="toHandlePage(row)">查看工单</Button>
								<span v-else>————</span>
							</template>
						</Table>

						<Table :columns="severColumns" :data="severList" border style="margin-top: 10px;">
							<template slot-scope="{ row, index }" slot="index">
								<span>{{index + 1}}</span>
							</template>
							<template slot-scope="{ row, index }" slot="severName">
								<span>{{row.service.severName}}</span>
								<Tooltip max-width="300" placement="right-end" :transfer="true" style="white-space: nowrap;">
									<Icon type="md-help-circle" />
									<template slot="content">
										<div style="font-size:12px;line-height: 12px;">
											<p class="p_content">CPU数量：{{row.service.cpuQuantity}}</p>
											<p class="p_content">CPU型号：{{row.service.cpuDes}}</p>
											<p class="p_content">网卡数量：{{row.service.ncquantity}}</p>
											<p class="p_content">网卡型号：{{row.service.ncdes}}</p>
											<p class="p_content">内存数量：{{row.service.ramQuantity}}</p>
											<p class="p_content">内存型号：{{row.service.ramDes}}</p>
											<p class="p_content">数据盘: {{row.service.dataVolumn + row.service.dataUnit}}</p>
											<p class="p_content">系统盘: {{row.service.sysVolumn + row.service.sysUnit}}</p>
										</div>
									</template>
								</Tooltip>
							</template>
							<template slot-scope="{ row, index }" slot="applyTime">
								<span v-if="row.reqId > 0" >{{formaTime(row.reqId)}}</span>
								<span v-else>————</span>
								<!-- <span>{{params.tenantInfo.project.create_time}}</span> -->
							</template>
							<template slot-scope="{ row, index }" slot="action">
								<Button v-if="row.reqId != 0" @click="toHandlePage(row)">查看工单</Button>
								<span v-else>————</span>
							</template>
						</Table>
					</div>
				</div>
				<!-- 工具订购列表 -->
				<div style="margin-top: 20px;float: left;width: 100%;">
					<div class="list_title">
						<div style="float:left;width: 14px;line-height: 10px;">
							<img src="../../../static/image/circle.png" style="width: 100%;">
						</div>
						<div style="float:left;padding-left:8px">
							<span>工具订购列表</span>
						</div>
					</div>
					<div style="padding-top: 10px;">
						<Table :columns="toolColumn" :data="toolList" border :span-method="handleSpan2">
							<template slot-scope="{ row, index }" slot="index">
								<span>{{index + 1}}</span>
							</template>
							<template slot-scope="{ row, index }" slot="applyTime">
								<span v-if="row.reqId > 0" >{{formaTime(row.reqId)}}</span>
								<span v-else>————</span>
								<!-- <span>{{params.tenantInfo.project.create_time}}</span> -->
							</template>
							<template slot-scope="{ row, index }" slot="action">
								<Button v-if="row.reqId != 0" @click="toHandlePage(row)">查看工单</Button>
								<span v-else>————</span>
							</template>
						</Table>
					</div>
				</div>
				<!-- 服务器订购列表 -->
				<div style="margin-top: 20px;float: left;width: 100%;margin-bottom: 20px;">
					<div class="list_title">
						<div style="float:left;width: 14px;line-height: 10px;">
							<img src="../../../static/image/circle.png" style="width: 100%;">
						</div>
						<div style="float:left;padding-left:8px">
							<span>数据接口</span>
						</div>
					</div>
					<div style="padding-top: 10px;">
						<Table :columns="dataColumns" :data="dataList" border>
							<template slot-scope="{ row, index }" slot="index">
								<span>{{index + 1}}</span>
							</template>
							<template slot-scope="{ row, index }" slot="number">
								<span>{{params.tenantInfo.dateApiNum}}</span>
							</template>
							<template slot-scope="{ row, index }" slot="applyTime">
								<!-- <span v-if="row.reqId != 0" >{{formaTime(row.reqId)}}</span>
                    <span v-else>————</span> -->
								<span>{{params.tenantInfo.project.create_time}}</span>
							</template>
						</Table>
					</div>
				</div>
			</template>
		</tabContent>
	</div>

</template>

<script>
	import echarts from 'echarts'
	import ajax from "../../ajax_util"
	import pheader from "../../comp_chatter/pheader"
	import tabContent from "../../comp_chatter/tab_content.vue"
	export default {
		name: "resourcesDatail",
		components: {
			pheader,
			tabContent
		},
		data() {
			return {
				tabs: null,
				resourceList: [],
				toolList: [],
				severList: [],
				resourceColumn: [{
						title: "序号",
						align: "center",
						key: "index",
						width: 80,
						slot: "index",
					},
					{
						title: '服务类型',
						key: 'clazz',
						align: 'left',
						width: 150,
						slot: "clazz"
					},
					{
						title: '服务名称',
						key: 'serviceName',
						align: 'left',
						width: 150,
						slot: "serviceName"
					},
					{
						title: '细分项名    ',
						key: 'subName',
						align: 'left',
						width: 150,
						slot: "subName"
					},
					{
						title: '订购内容',
						key: 'options',
						align: 'left',
						slot: 'options'
					},
					{
						title: "订购时间",
						align: "left",
						width: 160,
						key: "severName",
						slot: "applyTime",
					},
					{
						title: "操作",
						align: "center",
						width: 120,
						slot: "action"
					},
				],
				toolColumn: [{
						title: "序号",
						align: "center",
						key: "index",
						width: 80,
						slot: "index",
					},
					{
						title: "工具类型",
						align: "left",
						key: "clazz",
					},
					{
						title: "工具名称",
						align: "left",
						key: "toolName",
					},
					{
						title: "订购时间",
						align: "left",
						minWidth: 140,
						key: "severName",
						slot: "applyTime",
					},
					{
						title: "操作",
						align: "left",
						width: 120,
						slot: "action"
					},
				],
				severColumns: [{
						title: "序号",
						align: "center",
						key: "index",
						width: 80,
						slot: "index",
					},
					{
						title: "服务器类型",
						align: "left",
						minWidth: 140,
						key: "severName",
						slot: "severName",
					},

					// {
					//     title: "操作系统",
					//     align: "left",
					//     minWidth: 110,
					//     key: "os",
					// },
					// {
					//     title: "raid方式",
					//     align: "left",
					//     children: [
					//         {
					//             title: '系统盘',
					//             align: 'left',
					//             minWidth: 110,
					//         },
					//         {
					//             title: '数据盘',
					//             align: 'left',
					//             minWidth: 110,
					//             key: "dataRaid",
					//         },
					//     ]
					// },
					// {
					//     title: "部署区域",
					//     align: "left",
					//     minWidth: 110,
					//     key: "place"
					// },
					{
						title: "台数",
						align: "center",
						minWidth: 90,
						key: "quantity"
					},
					{
						title: "订购时间",
						align: "left",
						minWidth: 140,
						key: "severName",
						slot: "applyTime",
					},
					{
						title: "操作",
						align: "center",
						width: 120,
						slot: "action"
					},
				],
				dataColumns: [{
						title: "序号",
						align: "center",
						key: "index",
						width: 80,
						slot: "index",
					},
					{
						title: "接口数量",
						align: "center",
						key: "toolName",
						slot: "number"
					},
					{
						title: "订购时间",
						align: "center",
						minWidth: 140,
						key: "severName",
						slot: "applyTime",
					},
				],
				dataList: [{
					dateApiNum: 0,
				}],
				g_span_record_obj: {
					"resource": {}
				},
				g_hash_record: {},
				analyseDimList: [],
				xAxisData: {
					data1: ['hdfs', 'hive', 'mpp', '服务器', '容器'],
					data2: ['hadoop', '服务器', '容器']
				},
				tenantInfo: {}
			}
		},
		created: function() {
			this.tabs = this.$store.state.tabs
			console.log("params---->", this.params)
			// 对资源排序
			this.soltInfoList()
		},
		mounted: function(){
			this.getChartInfo()
		},
		methods: {
			// 获取图表信息
			getChartInfo() {
				var temp = {
					"volumn": {
						"volumn_hdfs": 0,
						"volumn_hive": 0,
						"volumn_mpp": 0,
						"volumn_server": 0,
						"volumn_container": 0,
					},
					"cpu": {
						"cpu_hadoop": 0,
						"cpu_server": 0,
						"cpu_container": 0
					},
					"ram": {
						"ram_hadoop": 0,
						"ram_server": 0,
						"ram_container": 0
					}
				}
				// this.params.tenantInfo.statistics.volumn_mpp = parseFloat(this.params.tenantInfo.statistics.volumn_mpp / 1024).toFixed(
				// 	2);
				// this.params.tenantInfo.statistics.volumn_server = parseFloat(this.params.tenantInfo.statistics.volumn_server / 1024)
				// 	.toFixed(2);
				var key2 = Object.keys(this.params.tenantInfo.statistics)
				key2.forEach(item => {
					if (item.indexOf('volumn_') != -1) {
						temp.volumn[item] = parseFloat(this.params.tenantInfo.statistics[item] / 1024).toFixed(2)
					} else if (item.indexOf('cpu_') != -1) {
						temp.cpu[item] = this.params.tenantInfo.statistics[item]
					} else if (item.indexOf('ram_') != -1) {
						temp.ram[item] = this.params.tenantInfo.statistics[item]
					}
				})
				this.tenantInfo = temp
				console.log(this.tenantInfo)
				this.initChart()
			},
			initChart() {
				var myChart = echarts.init(document.getElementById('resoureces'))
				var optionInfos0 = this.getOption('resoureces')
				myChart.setOption(optionInfos0)

				var myChart1 = echarts.init(document.getElementById('resoureces1'))
				var optionInfos1 = this.getOption('resoureces1')
				myChart1.setOption(optionInfos1)

				var myChart2 = echarts.init(document.getElementById('resoureces2'))
				var optionInfos2 = this.getOption('resoureces2')
				myChart2.setOption(optionInfos2)
			},
			getOption: function(type) {
				var colorList = [
					"rgb(215,80,75)", "rgb(6,90,199)", "rgb(6,99,218)", "rgb(41,167,224)",
					"rgb(8,163,243)", "rgb(4,145,248)", "rgb(30,100,255)", "rgb(45,44,166)", "#C6E579", "#F4E001"
				]
				var xdata = [] //x轴数据
				var title = "" //标题
				var seriesData = [] //数据
				var unit = "" //单位大小
				if (type === 'resoureces') {
					xdata = this.xAxisData.data1
					seriesData = Object.values(this.tenantInfo.volumn)
					title = "存储资源(单位：TB)"
					unit = "TB"
				} else if (type === 'resoureces1') {
					title = "CPU资源(单位：核)"
					unit = "核"
					xdata = this.xAxisData.data2
					seriesData = Object.values(this.tenantInfo.cpu)
				} else if (type === 'resoureces2') {
					xdata = this.xAxisData.data2
					seriesData = Object.values(this.tenantInfo.ram)
					title = "内存资源(单位：GB)"
					unit = "G"
				}
				var option = {
					title: {
						// backgroundColor:'rgb(6,90,199)',
						text: title,
						textStyle: {
							fontSize: 13,
							color: '#000',

							// fontStyle: 'italic',
							fontWeight: 'bold',
						},
						top: 5,
						left: 10,
						x: 'left',
						y: 'top',
					},
					grid: {
						height: '69%',
						top: 50,
						left: "20%"
					},
					tooltip: {},
					xAxis: [{
						type: 'category',
						axisLine: {
							lineStyle: {
								color: 'rgb(56,69,128)',
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 0,
							fontSize: 14,
							// fontStyle: 'italic',
							color: "#000"
						},

						data: xdata,
					}, ],
					yAxis: [{
						type: 'value',
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(56,69,128)',
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							color: "#000"
						},
						splitNumber: 3
					}, ],

					series: [{
						type: 'bar',
						barWidth: '30',
						itemStyle: {
							normal: {
								barBorderRadius: 5,
								color: function(params) {
									return "rgb(18,150,219  )"
								}
							},

						},
						data: seriesData,
						label: {
							show: true,
							position: 'top',
							fontSize: 14,
							color: '#000',
						},
					}, ]
				};
				return option
			},

			closeHandlePage() { //关闭页面
				var index = -1;
				this.tabs.list.some((item, i) => {
					if (item.tabKey === this.tabs.tabsPage) {
						index = i
						return true
					}
				})
				var isLast = false //判断是否操作上一步页面
				this.tabs.list.some((item, i) => {
					if (item.tabKey === this.tabs.lastPage) {
						isLast = true
						return true
					}
				})
				this.tabs.isEdit = ""
				if (isLast && this.tabs.lastPage != "") {
					this.tabs.tabsPage = this.tabs.lastPage
					this.tabs.lastPage = ""
				} else {
					this.tabs.tabsPage = this.tabs.list[index - 1].tabKey
				}
				this.tabs.list.splice(index, 1)
				console.log("this.tabs----------->>>>>", this.tabs)
				this.$store.commit("tabs", this.tabs);
			},
			soltInfoList() {

				// 工具
				var temp = this.params.tenantInfo.tools.sort((a, b) => {
					return a['clazz'].localeCompare(b['clazz'])
				})
				this.toolList = this.integratedData(temp)
				// 服务器
				this.severList = this.params.tenantInfo.servers.sort((a, b) => {
					return a.service['severName'].localeCompare(b.service['severName'])
				})
				this.resourceList = this.setSortData2(this.params.tenantInfo.resources)
				console.log("resourceList= ", this.resourceList)
			},
			
			setSortData2(data){
				var res = data.sort((a, b) => {
					let i = a['clazz'].localeCompare(b['clazz'])
					if (i == 0) {
						let i2 = a['serviceName'].localeCompare(b['serviceName'])
						if (i2 == 0) {
							return a['subName'].localeCompare(b['subName'])
						}else {
							return i2
						}
					} else {
						return i
					}
				})
				if (res.length > 0) {
					let that = this;
					let arrId = [];
					let serviceNameArr = [];
					let subNameArr = [];
					res.forEach(i => {
						!arrId.includes(i.clazz) ? arrId.push(i.clazz) : arrId;
						!serviceNameArr.includes(i.serviceName) ? serviceNameArr.push(i.serviceName) : arrId;
						!subNameArr.includes(i.subName) ? subNameArr.push(i.subName) : arrId;
					});
					let arrObj = [];
					let serviceNameObj = [];
					let subNameObj = [];
					arrId.forEach(j => {
						arrObj.push({
							id: j,
							num: 0
						})
					})
					serviceNameArr.forEach(j => {
						serviceNameObj.push({
							id: j,
							num: 0
						})
					})
					subNameArr.forEach(j => {
						subNameObj.push({
							id: j,
							num: 0
						})
					})
					console.log("arrId----->", arrId, arrObj)
					res.forEach(k => {
						arrObj.forEach(l => {
							k.clazz === l.id ? l.num++ : l.num;
						})
						serviceNameObj.forEach(l => {
							k.serviceName === l.id ? l.num++ : l.num;
						})
						subNameObj.forEach(l => {
							k.subName === l.id ? l.num++ : l.num;
						})
					})
					console.log(arrId, arrObj)
					console.log(serviceNameArr, serviceNameObj)
					console.log(subNameArr, subNameObj)
					res.forEach(m => {
						arrObj.forEach((n, index) => {
							if (m.clazz === n.id) {
								if (arrId.includes(m.clazz)) {
									m.mergeCol = n.num;
									arrId.splice(arrId.indexOf(m.clazz), 1);
								} else {
									m.mergeCol = 0;
								}
							}
						})
						serviceNameObj.forEach((n, index) => {
							if (m.serviceName === n.id) {
								if (serviceNameArr.includes(m.serviceName)) {
									m.mergeCol1 = n.num;
									serviceNameArr.splice(serviceNameArr.indexOf(m.serviceName), 1);
								} else {
									m.mergeCol1 = 0;
								}
							}
						})
						subNameObj.forEach((n, index) => {
							if (m.subName === n.id) {
								if (subNameArr.includes(m.subName)) {
									m.mergeCol2 = n.num;
									subNameArr.splice(subNameArr.indexOf(m.subName), 1);
								} else {
									m.mergeCol2 = 0;
								}
							}
						})
					})
				}
				
				return res;
			},
			
			setSortData(data) {
				var record = this.g_span_record_obj["resource"]
				record["clazz"] = {}
				record["serviceName"] = {}
				record["subName"] = {}
				var res = data.sort((a, b) => {
					var v1 = a["clazz"].split(".")[0] + a["serviceName"].split(".")[0] + a["subName"].split(".")[0];
					var v2 = b["clazz"].split(".")[0] + b["serviceName"].split(".")[0] + b["subName"].split(".")[0];


					var clazz1 = this.getSortName(a["clazz"]);
					var clazz2 = this.getSortName(b["clazz"]);
					var serviceName1 = this.getSortName(a["serviceName"]);
					var serviceName2 = this.getSortName(b["serviceName"]);
					var subName1 = this.getSortName(a["subName"]);
					var subName2 = this.getSortName(b["subName"]);
					//console.log(clazz1,a["clazz"])
					if (clazz1 == clazz2) {
						if (serviceName1 == serviceName2) {

							return subName1 - subName2;
						}
						return (serviceName1 - serviceName2);
					}
					return clazz1 - clazz2;

				})
				for (var i in res) {
					var d = res[i]
					// res[i]["clazz"]=this.getRealName(res[i]["clazz"]);
					// res[i]["serviceName"]=this.getRealName(res[i]["serviceName"])
					//     res[i]["subName"]=this.getRealName(res[i]["subName"])
					this.setUpandDown(record["clazz"], d["clazz"], Number(i));
					this.setUpandDown(record["serviceName"], d["clazz"] + d["serviceName"], Number(i));
					this.setUpandDown(record["subName"], d["clazz"] + d["serviceName"] + d["subName"], Number(i));

					// console.log("排序debug-----",d["clazz"],d["serviceName"],d["subName"])

				}
				return res
			},

			getSortName(nameStr) {
				var baseNum = 10000;
				var sp = nameStr.split(".");
				var res = 0
				if (sp.length > 1) {
					res = Number(sp[0]);
				} else {
					if (this.objContain(this.g_hash_record, nameStr)) {
						res = this.g_hash_record[nameStr];
					} else {
						var rand = this.randomNum(1000, 2000);
						this.g_hash_record[nameStr] = rand;
						res = rand;
					}

				}
				// console.log(res,nameStr)
				return res;
			},

			getRealName(nameStr) {
				var sp = nameStr.split(".");
				if (sp.length > 1) {
					return sp[1];
				} else {
					return nameStr;

				}

			},

			setUpandDown(obj, key, inp) {
				if (!this.objContain(obj, key)) {
					obj[key] = {
						"up": inp,
						"down": inp
					}
				}
				if (obj[key]["up"] < inp) {
					obj[key]["up"] = inp
				}
				if (obj[key]["down"] > inp) {
					obj[key]["down"] = inp
				}
			},

			objContain(obj, key) {
				// console.log(obj,key)
				for (var k in obj) {
					if (key == k) {
						return true
					}
				}
				return false;
			},

			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						//或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
						break;
					default:
						return 0;
						break;
				}
			},

			handleSpan({row,column,rowIndex,columnIndex}) {
				var record = this.g_span_record_obj["resource"];
				// console.log(rowIndex, columnIndex, row, column)
				var key = column["key"];
				var match = ""
				if (key == "clazz") {
					match = row[key]
				} else if (key == "serviceName") {
					match = row["clazz"] + row["serviceName"]
				} else if (key = "subName") {
					match = row["clazz"] + row["serviceName"] + row["subName"]
				}
				if (this.objContain(record[key], match)) {

					if (record[key][match]["down"] == rowIndex) {

						var res = [record[key][match]["up"] - record[key][match]["down"] + 1, 1]
						//console.log(key, res)
						return res
					} else {
						//console.log(key, "00")
						return [0, 0];
					}
				} else {
					//console.log(key, "11")
					return [1, 1]
				}


			},
			// 合并列
			integratedData(data) {
				if (data.length > 0) {
					let that = this;
					let arrId = [];
					data.forEach(i => {
						!arrId.includes(i.clazz) ? arrId.push(i.clazz) : arrId;
					});
					let arrObj = [];
					arrId.forEach(j => {
						arrObj.push({
							id: j,
							num: 0
						})
					})
					console.log("arrId----->", arrId, arrObj)
					data.forEach(k => {
						arrObj.forEach(l => {
							k.clazz === l.id ? l.num++ : l.num;
						})
					})
					data.forEach(m => {
						arrObj.forEach((n, index) => {
							if (m.clazz === n.id) {
								if (arrId.includes(m.clazz)) {
									m.mergeCol = n.num;
									arrId.splice(arrId.indexOf(m.clazz), 1);
								} else {
									m.mergeCol = 0;
								}
							}
						})
					})
					console.log("data----->", data)
				}
				return data;
			},
			// 只合并第一列
			handleSpan2({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 1) {
					// console.log(row,column,rowIndex, columnIndex)
					return {
						rowspan: row.mergeCol === 0 ? 0 : row.mergeCol,
						colspan: row.mergeCol === 0 ? 0 : 1
					};
				}else if (columnIndex === 2) {
					// console.log(row,column,rowIndex, columnIndex)
					return {
						rowspan: row.mergeCol1 === 0 ? 0 : row.mergeCol1,
						colspan: row.mergeCol1 === 0 ? 0 : 1
					};
				}else if (columnIndex === 3) {
					// console.log(row,column,rowIndex, columnIndex)
					return {
						rowspan: row.mergeCol2 === 0 ? 0 : row.mergeCol2,
						colspan: row.mergeCol2 === 0 ? 0 : 1
					};
				}
			},

			// 前往详情页面
			toHandlePage(row) {
				console.log("row---->", row.reqId)
				var isName = false //是否已经存在标签
				var key = row.reqId + "订购概览"
				this.tabs.list.some(item => {
					if (item.tabKey === key) {
						isName = true
						return
					}
				})

				console.log("isName--->", isName)
				console.log("row--->", row)
				if (!isName) {
					this.tabs.list.push({
						title: "工单详情",
						key: "handle",
						tabKey: key,
						params: {
							reqId: row.reqId,
							status: 1,
						}
					})
				}
				this.tabs.isEdit = ""
				this.tabs.lastPage = this.tabs.tabsPage
				this.tabs.tabsPage = key
				this.$store.commit("tabs", this.tabs);
			},

			formaTime(value) {
				var temp = parseInt((value + '').substring(0, 13))
				return this.utils.formatDate(new Date(temp), "yyyy-MM-dd hh:mm")
			}
		},
		props: {
			params: {}
		}
	}
</script>
